<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <select name="" id="province">
    <option value="湖北省">请选择省</option>
  </select>
  <select name="" id="city">
    <option value="武汉市">请选择市</option>
  </select>
  <select name="" id="area">
    <option value="黄陂区">请选择区</option>
  </select>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

  <script>
    function pname () {
      // return new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve('成功获取省份')
      //   }, 1000)
      // })
      return axios({
        url: 'http://hmajax.itheima.net/api/province'
      })
    }
    function cname (pname) {
      // return new Promise((resolve, reject) => {
      //   setTimeout(() => {
      //     resolve('成功获取城市')
      //   }, 1000)
      // })
      return axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {
          pname
        }
      })
    }

    function aname (pname, cname) {
      // return new Promise((resolve, reject) => {
      //   resolve('成功获取区')
      // })
      return axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname,
          cname
        }
      })
    }

    /* 获取省市区 */
    const province = document.querySelector('#province')
    const city = document.querySelector('#city')
    const area = document.querySelector('#area')

    pname().then(res => {
      console.log(res, 111);
      const str1 = res.data.list.map(item => {
        return `<option  value="${item}">${item}</option>`
      })
      province.innerHTML = '<option value="湖北省">请选择省</option>' + str1.join(' ')
      city.innerHTML = ' <option value="请选择市">请选择市</option>'
    })


    /* 点击省获取市 */
    var pname = ''
    province.addEventListener('change', async (e) => {
      console.log(e.target.value);
      pname = e.target.value
      /* 获取市 */
      const res2 = await cname(e.target.value)
      console.log(res2, 22);
      const str2 = res2.data.list.map(item => {
        return `<option  value="${item}">${item}</option>`
      })
      city.innerHTML = ' <option value="请选择市">请选择市</option>' + str2.join(' ')
      area.innerHTML = '<option value="请选择区">请选择区</option>'
    })

    city.addEventListener('change', async (e) => {
      console.log(e.target.value);
      /* 获取市 */
      const res3 = await aname(pname, e.target.value)
      console.log(res3, 22);
      const str3 = res3.data.list.map(item => {
        return `<option  value="${item}">${item}</option>`
      })
      // city.innerHTML = ' <option value="请选择市">请选择市</option>' + str2.join(' ')
      area.innerHTML = '<option value="请选择区">请选择区</option>' + str3.join(' ')
    })
  </script>
</body>

</html>